<style>
</style>

<template>
<div>
	<div style="max-width:360px;" long center>
		<p mgt6 text-center>
			<img :src="footer.websiteInfo.logo" h4>
		</p>
		<p mgt4 text-center sz4>登陆</p>
		<Form ref="loginform" :rules="rules" :model="loginModel" mgt5>
			<FormItem prop="userNameOrEmailAddress">
				<Input v-model="loginModel.userNameOrEmailAddress" size="large" placeholder="用户名*"></Input>
			</FormItem>
			<FormItem prop="password">
				<Input v-model="loginModel.password" type="password" size="large" placeholder="密码*">
					<!-- <Icon type="ios-help" slot="suffix" title="忘记密码？" linkable @click="handleRetrievePassword" /> -->
				</Input>
			</FormItem>
		</Form>
		<p mgt2 gray3>
			<Checkbox v-model="loginModel.rememberMe">两周内自动登录</Checkbox>
		</p>
		<p mgt3>
			<Button type="primary" size="large" @click="login" long ht3 white>登录</Button>
		</p>
		<!-- <p mgt4>
			<span left gray3 ht1 pdx1>其他方式登陆</span>
			<img src="../../images/qq-logo.png" ht1 pdx1 linkable>
			<img src="../../images/weixin-logo.png" ht1 pdx1 linkable>
			<img src="../../images/weibo-logo.png" ht1 pdx1 linkable>
			<span right sz1 ht1 linkable>手机快捷登陆 ></span>
		</p> -->
		<Divider mgt5 gray3>尚未注册账号？</Divider>
		<p mgt4>
			<Button size="large" long ht3 :to="{name: 'register'}">注册</Button>
		</p>
	</div>
</div>
</template>
<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';

@Component
export default class IndexLogin extends AbpBase {
	loginModel={
		userNameOrEmailAddress:'',
		password:'',
		rememberMe:false,
		userType: 'member'
	}
	async login(){
		(this.$refs.loginform as any).validate(async (valid:boolean)=>{
			if(valid){
				this.$Message.loading({
					content: '正在登录',
					duration:0
				})
				await this.$store.dispatch({
					type:'app/login',
					data:this.loginModel
				})
				sessionStorage.setItem('rememberMe',this.loginModel.rememberMe?'1':'0');
				location.reload();
			}
		});      
	}
	rules={
			userNameOrEmailAddress: [
				{ required: true, message: '必须填写用户名', trigger: 'blur' }
			],
			password: [
				{ required: true, message: '必须填写密码', trigger: 'blur' }
			]
		}
	handleRetrievePassword() {
		this.$router.push({
			name: 'retrieve-password'
		})
	}
	get footer() {
		return this.$store.state.websiteInfo.homeFooter;
	}
}
</script>